<template>
  <div class="back" style=" height: calc(100vh - 100px)">
    <div style="height: 50px;"></div>

    <div style="width: 75%;margin: 0 auto;padding: 20px;background-color: white;border-radius: 20px">


    <el-table
        :row-class-name="tableRowClassName"
        header-cell-class-name="header-name"

        v-loading="loading" :data="bookingList">
      <el-table-column label="编号" align="center" prop="id"/>
      <el-table-column label="用户" align="center" prop="userName"/>
      <el-table-column label="类型" align="center" prop="type"/>
      <el-table-column label="状态" align="center" prop="status"/>
      <el-table-column label="预约时间" align="center" prop="bookingTime"/>

      <el-table-column label="活动" align="center" prop="">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="chakan(scope.row)"
          >查看活动详情
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">


          <el-button
              size="mini"
              type="text"
              v-if="scope.row.status=='待使用'"
              @click="handUpdate(scope.row)"
          >修改预约时间
          </el-button>

          <el-button
              size="mini"
              type="text"
              v-if="scope.row.status=='待使用'"
              @click="handleDelete(scope.row)"
          >取消预约
          </el-button>

          <el-button
              size="mini"
              type="text"
              v-if="scope.row.status=='待使用'"
              @click="checkUse(scope.row)"
          >确认使用
          </el-button>

          <el-button
              v-else
          >无操作
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <el-dialog title="活动详情" :visible.sync="open" width="80%" append-to-body>
      <el-table v-loading="loading"
                :row-class-name="tableRowClassName"
                header-cell-class-name="header-name"
                :data="goodsDetails">
        <el-table-column label="名称" align="center" prop="goodsName" show-overflow-tooltip/>
        <el-table-column label="类型" align="center" prop="type"/>

        <el-table-column label="图片" align="center" width="180">
          <template slot-scope="scope">
            <!--            <div v-if="!scope.row.goodsInfo.goodsPic">暂无图像</div>-->
            <div>
              <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.goodsImg.split(',')[0]"
                  :preview-src-list="scope.row.goodsImg.split(',')">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="details" width="180" show-overflow-tooltip/>
        <el-table-column label="价格" align="center" prop="price"/>


      </el-table>
    </el-dialog>
    <el-dialog title="修改预约时间" :visible.sync="open2" width="20%" center append-to-body>


      <el-date-picker clearable size="small"
                      v-model="form.bookingTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择预约时间">
      </el-date-picker>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open2=false">取 消</el-button>
      </div>


    </el-dialog>
  </div>
</template>

<script>
import {listBooking, delBooking, updateBooking} from '@/api/project/booking'
import {updateMuseum} from "@/api/project/museum";
import {updateActivity} from "@/api/project/activity";
import {delActivity} from "../../../../admin/src/api/project/activity";

export default {
  name: "index",

  data() {
    return {
      bookingList: [],
      goodsDetails: [],
      userInfo:{},
      form:{},
      open: false,
      open2: false,
    }
  },

  created() {

    this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
    if(!this.userInfo){
      this.$message.error("请先登录")
      this.$router.push('/login')
    }

    this.getList()
  },


  methods: {

    submitForm(){
      if (this.form.bookingTime){

        updateBooking(this.form).then(res=>{
          this.getList()
          this.open2=false
          this.$message.success("修改成功")
        })
      }else {
        this.$message.error("请选择预约时间")
      }



    },
    handUpdate(e){
      this.open2=true;
      this.form=e;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex %2 == 1) {
        console.log(111)
        return 'warning-row';
      } else  {
        console.log(222)
        return 'success-row';
      }

    },

    checkUse(row){
      this.$confirm('请确认是否已经使用？').then(function () {
        return updateBooking({
          id:row.id,
          status:'已使用'
        });
      }).then(() => {
        this.getList();
        this.$message.success("操作成功");
      }).catch(() => {
      });
    },
    getList() {
      listBooking().then(res => {
        this.bookingList = res.data.filter(item=>{
          return item.userId==this.userInfo.id
        })
      })
    },
    chakan(e) {
      this.goodsDetails = this.bookingList.filter(item => item.id === e.id)
      this.open = true
    },

    handleDelete(e) {
      this.$confirm('是否确认取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
         updateBooking({id:e.id,status:'已取消'}).then(res=>{


          if (e.type=='体验馆'){
            let data=e.museum
            e.museum.num+=1
            updateMuseum(data).then(res2=>{
              console.log(e)
              this.$message({
                type: 'success',
                message: '预约取消成功!'
              });

              this.getList()
            })
          }else if(e.type=='非遗项目') {
            let data=e.activity
            e.activity.num+=1
            updateActivity(data).then(res2=>{
              console.log(e)
              this.$message({
                type: 'success',
                message: '预约取消成功!'
              });

              this.getList()
            })
          }
         })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },


  }
}
</script>

<style>
.back{
  background-image: url('../../assets/bg.png');
  background-size: cover;
}
.el-table .warning-row {
  background: #fcf2e6;
  font-size: 20px;
  color: black;
}
/*.el-table__body tr{

  pointer-events: none;

}*/
.el-table .success-row {
  background: #f8d6ba;
  font-size: 20px;
  color: black;
}


.header-name {
  font-size: 20px;
  color: black;
}
</style>
